<template>
 <view class="wrap">
  <u-form :model="user" ref="uForm">
<view class="content">
			<view class="zr">
				<view class="water">
					<view class="water-c">
						<view class="water-1"> </view>
						<view class="water-2"> </view>
					</view>
				</view>
			</view>
		</view>
 <u-form-item label-width="140" label-position="left" label="用户名"
prop="zhanghao">
 <u-input :border="border" placeholder="请输入用户名" v-model="user.userName"
type="text"></u-input>
 </u-form-item>
 <u-form-item label-width="140" label-position="left" label="密码" prop="password">
 <u-input :password-icon="true" :border="border" type="password" v-model="user.password"
 placeholder="请输入密码"></u-input>
 </u-form-item>
 <u-form-item label-width="140" label-position="left" label="确认密码" prop="rpassword">
 <u-input :password-icon="true" :border="border" type="password" v-model="user.rpassword"
 placeholder="再输一次密码"></u-input>
 </u-form-item>
 <u-form-item label-width="140" label-position="left" label="年龄" prop="age">
  <u-input :border="border" placeholder="请输入年龄" v-model="user.age"
 type="text"></u-input>
  </u-form-item>
  
  <u-form-item label-width="140" label-position="left" label="性别" prop="sex">
   <u-input :border="border" placeholder="请输入性别" v-model="user.sex"
  type="text"></u-input>
   </u-form-item>
   <u-form-item label-width="140" label-position="left" label="城市" prop="city">
    <u-input :border="border" placeholder="请输入所在省份" v-model="user.city"
   type="text"></u-input>
    </u-form-item>

 <u-form-item label-width="140"  label-position="left" label="个性签名" prop="sign">
  <u-input :border="border" placeholder="请输入个性签名" v-model="user.sign"
 type="text" ></u-input>
  </u-form-item>


  </u-form>
  <u-button @click="submit">提交</u-button>
  </view>
 </template>
 <script>
  export default {
  data() {
  return {
  border: true,
  user: { },
    
  
  }
  },
  methods: {
     submit() {
  console.log(this.user);
    //检查两次密码是否一致
	if(this.user.password != this.user.rpassword){
		//提交
		this.$u.toast("两次密码输入不同");
		//终止代码
		return
	}
	//到这里说明密码相同
	//发送网络注册请求
	uni.request({
		url:"http://localhost:8080/doRegister",
		data:this.user,
		method:"POST",
		success:(res)=>{
			console.log(res);
			if(res.data.code*1==200){
				uni.navigateBack()
			}else if(res.data.code*1==2011){ 
			
					this.$u.toast('用户名和密码不能为空')
				
			}
			else if(res.data.code*1==2012){
				this.$u.toast('用户名重复，请重新输入')
			}
			else {
				this.$u.toast('注册异常')
			}
		}
	})
  },
   radioChange(e) {
   //console.log(e.detail)
   console.log(e,"radio",this.user.leibie)
   //this.user.leibie = e.detail.value
   },
   radioGroupChange(e){
   console.log(e,"group",this.user.leibie)
   }
   }
   }
   


  </script>
  <style>
	  .zr {
	  		color: white;
	  		background: #77eef6;
	  		width: 100%;
	  		height: 60upx;
	  		position: relative;
	  	}
	  
	  	.water {
	  		position: absolute;
	  		left: 0;
	  		bottom: -10upx;
	  		height: 30upx;
	  		width: 100%;
	  		z-index: 1;
	  	}
	  
	  	.water-c {
	  		position: relative;
	  	}
	  
	  	.water-1 {
	  		background: url("") repeat-x;
	  		background-size: 600upx;
	  		animation: wave-animation-1 4.5s infinite linear;
	  	}
	  
	  	.water-2 {
	  		top: 5upx;
	  		background: url("") repeat-x;
	  		background-size: 600upx;
	  		animation: wave-animation-2 8s infinite linear;
	  	}
	  
	  	.water-1,
	  	.water-2 {
	  		position: absolute;
	  		width: 100%;
	  		height: 60upx;
	  	}
	  
	  	.back-white {
	  		background: #fff;
	  	}
	  
	  	@keyframes wave-animation-1 {
	  		0% {
	  			background-position: 0 top;
	  		}
	  
	  		100% {
	  			background-position: 600upx top;
	  		}
	  	}
	  
	  	@keyframes wave-animation-2 {
	  		0% {
	  			background-position: 0 top;
	  		}
	  
	  		100% {
	  			background-position: 600px top;
	  		}
	  	}
	  
  </style>